<template>
    <el-container class="container">
        <!-- head 头 -->
        <el-header class="header_box">
            <div class="header_l">
                <HeaderLeft 
                :disabled="hasDisabled" 
                :tableIndex="tableIndex" 
                :processNum="saveProcessArray.length"
                :tableName="tableName"
                :tableHead="tableHead"
                :tableData="tableData"
                :tableAllData="tableAllData"
                :originalTableHead="originalTableHead"
                :originalTableData="originalTableData"
                :executeStep="executeStep"
                @parentData="getChilds">                        
                </HeaderLeft>
            </div>
            <div class="header_r" v-if="!authority">
                <HeaderRight
                :disabled='hasDisabled'
                :saveProcessArray='saveProcessArray'
                :originalTableHead='originalTableHead'
                :originalTableData="originalTableData"
                @parentData="getChilds">                    
                </HeaderRight>
            </div>
        </el-header>
        <!-- 主体 -->
        <el-main class="main">
            <!-- 操作 -->
            <div class="select_box" v-if="!authority">
                <Operation
                :hasDisabled="hasDisabled"
                :rowsArray="rowsArray"
                :originalTableHead="originalTableHead"
                :originalTableData="originalTableData"
                :tableHead="tableHead"
                :tableData="tableData"
                :tableAllData="tableAllData"
                :getDelData="getDelData"
                :getSortData="getSortData"
                :getDecimal="getDecimal"
                :getSplitData="getSplitData"
                :getReplaceData="getReplaceData"
                :addProcess="addProcess"
                @parentData="getChilds">                    
                </Operation>
            </div>
            <!-- 表格 -->
            <div class="table_box" ref="tableHeight">
                <TableComponent 
                :sortName="sortName"
                :sortType="sortType"
                :getSortData="getSortData"
                :tableName="tableName"
                :tableIndex="tableIndex"
                :tableHead="tableHead"
                :tableData="tableData"
                :tableAllData="tableAllData"
                :rowsArray="rowsArray"
                @parentData="getChilds">                
                </TableComponent>
            </div>
        </el-main>

    </el-container>
</template>

<script>
import HeaderLeft from "@/components/header_left"
import HeaderRight from "@/components/header_right"
import TableComponent from "@/components/table"
import Operation from "@/components/operation"
export default {
    name: 'Index',
    title: '主页',
    components: {
        HeaderLeft,
        HeaderRight,
        TableComponent,
        Operation,
    },
    computed: {
        // 是否禁止
        hasDisabled() {
            return this.tableAllData.length?false : true
        }       
    },
    methods: {
        // 重新设置值
        setInit(obj) {
            for (let key in obj) {
                this.$set(this, key, obj[key])
            }
        },
        // 获取子组件传的值
        getChilds(data) {
            // console.log(data)
            this.setInit(data)
        },

        // 按照步骤执行
        executeStep(data) {
            let array = data
            this.saveProcessArray.forEach((v, i, arr) => {
                this.rowsArray = v.data
                if(v.type === "del"){      // 删除步骤
                    array = this.getDelData(array)
                } else if(v.type === "sort") {        // 排序步骤
                    array = this.getSortData(array, v.name)
                } else if(v.type === "solit") {      // 拆分
                    array = this.getSplitData(array, v.name)
                } else if(v.type === "decimal") {      // 保留小数点
                    array = this.getDecimal(array, v.name)
                } else if(v.type === "replace") {      // 替换
                    this.getReplaceData(v.name)
                }
            })
            this.rowsArray = []
            this.sortName = null
            // 初始化
            return array
        },
        // 删除数据
        getDelData(data) {
            let tableHead = {}
            let array = []
            data.forEach((val) => {
                let objs = {}
                this.rowsArray.forEach((key) => {
                    if(val.hasOwnProperty(key)) {
                        // 保留数据和表头
                        objs[key] = val[key]
                        tableHead[key] = this.tableHead[key]                          
                    }
                })
                array.push(objs)
            })
            // 重新设置表头
            this.tableHead = tableHead
            this.originalTableHead.push(this.$Util.deepCopy(this.tableHead))
            return array
        },
        // 排序的列数据
        getSortData(array, type) {
            let name = this.rowsArray[0]
            let data
            if(type === 'ascend') {            // 升序
                data = array.sort((a,b) => {
                    console.log(typeof a[name])
                    return a[name].localeCompare(b[name]) 
                }) 
            }else{      // 降序                                  
                data = array.sort((a,b) => {
                    return b[name].localeCompare(a[name])
                }) 
            }
            this.originalTableHead.push(this.$Util.deepCopy(this.tableHead))
            return data
        },
        // 获取拆份字段
        getSplitName(data){
            let array = []
            // 找出要拆份的全部字段
            data.forEach((val) => {
                this.rowsArray.forEach((key) => {
                    if(val.hasOwnProperty(key)) {
                        array.push(val[key])
                    }
                }) 
            })
            // 获取字段出现的次数
            let obj = array.reduce((obj, key) => {
                if (key in obj) {
                    obj[key]++;
                } else {
                    obj[key] = 1;
                }
                return obj
            }, {})
            // 获取出现次数相同的字段
            let max = Math.max.apply(null, Object.values(obj))
            let arr = Object.keys(obj).filter((key) => obj[key] === max )
            return arr
        },
        // 拆分处理表头
        getSplitTable(data, name) {
            let firtsObj = {}
            for(let i=0; i < name.length; i++){
                for(let key in data) {
                    // 添加不一样的key值
                    firtsObj[i + "@" + key] = data[key]
                }
            }
            return firtsObj
        },
        // 拆分处理数据
        getSplitData(data, name) {
            let solitName = name?name.split(','):this.getSplitName(data)
            let array = []
            solitName.forEach((val) =>{
                let firstVal = typeof val == 'string'? val.toUpperCase() : val
                let arr = data.filter((v) => {
                    let isSolit = false
                    for(let k in v) {
                        let endV = typeof v[k] == 'string'? v[k].toUpperCase() : v[k]
                        if(endV === firstVal){
                            isSolit = true
                        }
                    }
                    return isSolit
                })
                array.push(arr)
            })
            let firtstData = array[0].map(() => {
                return {}
            })
            array.forEach((val, i) =>{
                val.forEach((v, index) => {
                    for(let key in v) {
                        // 添加不一样的key值
                        firtstData[index][i + "@" + key] = v[key]
                    }
                })
                
            })
            // 表头添加
            let tableHead = this.getSplitTable(this.tableHead, solitName)
            this.tableHead = tableHead
            this.originalTableHead.push(this.$Util.deepCopy(this.tableHead))
            return firtstData
        },
        // 获取小数点数据
        getDecimal(array, name) {
            let reg = /^\d+(\.\d+)?$/; //非负浮点数
            array.map((val, i) => {
                this.rowsArray.forEach((key) => {
                    if(val.hasOwnProperty(key)) {
                        val[key] =  !reg.test(val[key])?val[key] : val[key].toFixed(name).toString()          
                    }
                })
                return val
            })
            this.originalTableHead.push(this.$Util.deepCopy(this.tableHead))
            return array
        },    
        // 处理替换数据
        getReplaceData(name) {
            let replaceArray = name.split(',')
            this.rowsArray.forEach((v,i) => {
                for(let k in this.tableHead){
                    if(k === v){
                        this.$set(this.tableHead, k, replaceArray[i])
                    }
                }
            })
            this.originalTableHead.push(this.$Util.deepCopy(this.tableHead))
        },
        // 添加步骤, 标题, 表头数据，名称
        addProcess(type, title, data, name) {
            this.saveProcessArray.push({
                type:type,
                title: title,
                data: data,
                name: name
            })
        },
    },
    data() {
        return {
            tableName: [],                      // 表名数据
            tableHead: {},                      // 表头数据
            tableData: [],                      // 表格数据
            tableAllData: [],                   // 表格全部数据
            originalTableData: [],              // 表格原有数据
            originalTableHead: [],              // 表头原有数据
            tableIndex: 0,                      // 表格索引
            rowsArray: ['Block Type'],                      // 记录列表头
            sortName: '',                       // 记录排序名称
            sortType: 'ascend',                 // 排序升降
            saveProcessArray: [],               // 保存步骤模板
            authority: false,                   // 权限
            
            simpleness: {
                title: '简单模板',
                data: [
                    {
                        title: '删除',
                        type: 'del',
                        data: ["Block Type", "96alum", "__EMPTY_2", "__EMPTY_4"]
                    },
                    {
                        title: "保留小数点",
                        type: "decimal",
                        data: ["__EMPTY_4"],
                        name: 2
                    },
                    {
                        title: "排序",
                        type: "sort",
                        data: ["__EMPTY_2"],
                        name: "ascend"
                    },
                    {
                        title: "拆分",
                        type: "solit",
                        data: ["__EMPTY_2"],
                        name: ''
                    },
                    {
                        title: "删除",
                        type: "del",
                        data: ["0@Block Typ", "0@96alum", "0@__EMPTY_4", "1@__EMPTY_4"]
                    },
                    {
                        title: "替换",
                        type: "replace",
                        data: ["0@__EMPTY_4", "1@__EMPTY_4"],
                        name: "FAM,VIC"
                    },
                    {
                        title: "排序",
                        type: "sort",
                        data: ["0@96alum"],
                        name: "ascend"
                    }
                ]
            }, 
              
        }
    },
    created() {
    },
    mounted() {
        if(this.authority){
            this.saveProcessArray = this.simpleness.data
        }
    },
}
</script>
<style>
    html, body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .container{
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .main{
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .header_box{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .table_box{
        width: 100%;
        height: 100%;
        flex: 1;
        overflow: hidden;
    }
</style>